<template>
  <NDrawer
    v-model:show="show"
    :default-width="480"
    v-bind="drawerBind"
  >
    <NDrawerContent v-bind="drawerContentBind" closable>
      <template #header>
        <component :is="props.title" />
      </template>

      <slot />

      <template #footer>
        <div :id="props.actionId" />
      </template>
    </NDrawerContent>
  </NDrawer>
</template>

<script setup lang="ts">
import type { DrawerContentProps, DrawerProps } from 'naive-ui'
import type { NvDrawerProps } from './types'
import { pick } from 'lodash-es'
import { drawerContentProps, drawerProps, NDrawer, NDrawerContent } from 'naive-ui'
import { computed } from 'vue'
import { mergeClass } from '@/utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NvDrawerProps>(), {
  maskClosable: true,
})
const show = defineModel<boolean>('show', { required: true })

const drawerBind = computed<DrawerProps>(() => {
  let bind = pick(props, Object.keys(drawerProps)) as DrawerProps
  if (props.resizable) {
    const { width: defaultWidth = 480, height: defaultHeight = 320, ...rest } = bind
    bind = { ...rest, defaultWidth, defaultHeight }
  }
  return {
    ...bind,
    contentClass: mergeClass(props.contentClass as string),
  }
})
const drawerContentBind = computed<DrawerContentProps>(() => {
  const { title, ...bind } = pick(props, Object.keys(drawerContentProps))
  return bind
})
</script>
